import 'package:flutter/material.dart';

class BlindBoxPictorialPage extends StatefulWidget {
  const BlindBoxPictorialPage({Key? key}) : super(key: key);

  @override
  State<BlindBoxPictorialPage> createState() => _BlindBoxPictorialPageState();
}

class _BlindBoxPictorialPageState extends State<BlindBoxPictorialPage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  final List<String> tabs = ['全部', '隐藏款', '稀有款', '普通款'];
  final List<Map<String, String>> items = [
    {
      'name': '五条悟',
      'image': 'assets/images/pay/icon_confirm_wx.png',
      'type': 'hidden',
    },
    {
      'name': '虎杖悠仁',
      'image': 'assets/images/pay/icon_confirm_wx.png',
      'type': 'rare',
    },
    {
      'name': '钉崎野薔薇',
      'image': 'assets/images/pay/icon_confirm_wx.png',
      'type': 'normal',
    },
    {
      'name': '五条悟',
      'image': 'assets/images/pay/icon_confirm_wx.png',
      'type': 'hidden',
    },
    {
      'name': '虎杖悠仁',
      'image': 'assets/images/pay/icon_confirm_wx.png',
      'type': 'rare',
    },
    {
      'name': '钉崎野薔薇',
      'image': 'assets/images/pay/icon_confirm_wx.png',
      'type': 'normal',
    },{
      'name': '五条悟',
      'image': 'assets/images/pay/icon_confirm_wx.png',
      'type': 'hidden',
    },
    {
      'name': '虎杖悠仁',
      'image': 'assets/images/pay/icon_confirm_wx.png',
      'type': 'rare',
    },
    {
      'name': '钉崎野薔薇',
      'image': 'assets/images/pay/icon_confirm_wx.png',
      'type': 'normal',
    },{
      'name': '五条悟',
      'image': 'assets/images/pay/icon_confirm_wx.png',
      'type': 'hidden',
    },
    {
      'name': '虎杖悠仁',
      'image': 'assets/images/pay/icon_confirm_wx.png',
      'type': 'rare',
    },
    {
      'name': '钉崎野薔薇',
      'image': 'assets/images/pay/icon_confirm_wx.png',
      'type': 'normal',
      
    },
    {
      'name': '五条悟',
      'image': 'assets/images/pay/icon_confirm_wx.png',
      'type': 'hidden',
    },
    {
      'name': '虎杖悠仁',
      'image': 'assets/images/pay/icon_confirm_wx.png',
      'type': 'rare',
    },
    {
      'name': '钉崎野薔薇',
      'image': 'assets/images/pay/icon_confirm_wx.png',
      'type': 'normal',
    },
    // 你可以继续添加更多角色
  ];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: tabs.length, vsync: this);
    _tabController.addListener(() {
      setState(() {});
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  List<Map<String, String>> get filteredItems {
    if (_tabController.index == 0) return items;
    if (_tabController.index == 1) return items.where((item) => item['type'] == 'hidden').toList();
    if (_tabController.index == 2) return items.where((item) => item['type'] == 'rare').toList();
    if (_tabController.index == 3) return items.where((item) => item['type'] == 'normal').toList();
    return items;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFDECF3),
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios_new, color: Colors.black),
          onPressed: () => Navigator.of(context).pop(),
        ),
        title: const Text(
          '图鉴',
          style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
        actions: [
          IconButton(
            icon: const Icon(Icons.share, color: Colors.black),
            onPressed: () {},
          ),
        ],
      ),
      body: Container(
        color: Colors.white,
        child: Column(
          children: [
            Container(
              color: Colors.white,
              height: 40,
              child: TabBar(
                dividerColor: Colors.transparent,
                controller: _tabController,
                labelColor: Colors.black,
                unselectedLabelColor: Colors.grey,
                indicatorColor: Colors.transparent,
                tabs: tabs.map((e) => Tab(text: e)).toList(),
              ),
            ),
            Expanded(
              child: Container(
                margin: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(24),
                ),
                child: GridView.builder(
                  padding: const EdgeInsets.all(16),
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    mainAxisSpacing: 24,
                    crossAxisSpacing: 8,
                    childAspectRatio: 0.75,
                  ),
                  itemCount: filteredItems.length,
                  itemBuilder: (context, index) {
                    final item = filteredItems[index];
                    return GestureDetector(
                      onTap: () {
                        showDialog(
                          context: context,
                          barrierDismissible: true,
                          builder: (context) {
                            return Dialog(
                              backgroundColor: Colors.transparent,
                              insetPadding: EdgeInsets.zero,
                              child: Stack(
                                alignment: Alignment.center,
                                children: [
                                  GestureDetector(
                                    onTap: () => Navigator.of(context).pop(),
                                    child: Container(
                                      width: double.infinity,
                                      height: double.infinity,
                                      color: Colors.black.withOpacity(0.5),
                                    ),
                                  ),
                                  Column(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                      SizedBox(                                        
                                        width: 220,
                                        height: 220,
                                        child: Stack(
                                          clipBehavior: Clip.none,
                                          children: [
                                            Align(
                                              alignment: Alignment.center,
                                              child: CircleAvatar(
                                                radius: 90,
                                                backgroundImage: AssetImage(item['image']!),
                                              ),
                                            ),
                                            Positioned(
                                              top: -24,
                                              right: -24,
                                              child: GestureDetector(
                                                onTap: () => Navigator.of(context).pop(),
                                                child: Container(
                                                  decoration: BoxDecoration(
                                                    color: Colors.black.withOpacity(0.5),
                                                    shape: BoxShape.circle,
                                                  ),
                                                  padding: const EdgeInsets.all(8),
                                                  child: const Icon(Icons.close, color: Colors.white, size: 28),
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      const SizedBox(height: 24),
                                      Text(
                                        item['name']!,
                                        style: const TextStyle(
                                          color: Colors.white,
                                          fontSize: 28,
                                          fontWeight: FontWeight.bold,
                                          shadows: [
                                            Shadow(
                                              color: Colors.black54,
                                              blurRadius: 8,
                                              offset: Offset(0, 2),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            );
                          },
                        );
                      },
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          CircleAvatar(
                            radius: 40,
                            backgroundImage: AssetImage(item['image']!),
                            backgroundColor: Colors.white,
                          ),
                          const SizedBox(height: 4),
                          Container(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 6, vertical: 2),
                            decoration: BoxDecoration(
                              color: const Color(0xFFF2F2F2),
                              borderRadius: BorderRadius.circular(12),
                            ),
                            child: Text(
                              item['name']!,
                              style: const TextStyle(
                                  fontSize: 12, color: Colors.black),
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
